<template>
    <div class="my-header">
        <el-tabs v-model="data.activeName" class="demo-tabs">
            <el-tab-pane label="技术标准" name="first">
                <el-form :rules="rules" ref="ruleFormRef" :model="ruleForm" label-width="120px" class="demo-ruleForm"
                    status-icon>
                    <el-row>
                        <el-col :span="24">
                            <el-form-item label="类型说明" prop="categoryDescription">
                                <el-input placeholder="" v-model="ruleForm.categoryDescription"  :disabled="1" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="标准名称" prop="name">
                                <el-input placeholder="" v-model="ruleForm.name" style="width: 150px" :disabled="1"  />
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="编制单位" >
                                <popup-tree-input :data="options.orgAllList" :props="data.popupTreeProps"
                                    :prop="ruleForm.participatingUnits" :node-key="'' + deptForm.parentId"
                                    :current-change-handle="changeValue" :disabled="1"  />
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="起草单位" >

                                <popup-tree-input :data="options.orgAllList" :props="data.popupTreeProps"
                                    :prop="ruleForm.draftingUnit" :node-key="'' + deptForm.parentId"
                                    :current-change-handle="changeValue1" :disabled="1"  />
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="8">
                            <el-form-item label="起草人" prop="drafter">

                                <user-list-modal
                                v-model="ruleForm.drafter"
                                @update:modelValue="changeValue2"
                                :default-users="[]"
                                :multiple="false"
                                :devType="'platform'" :disabled="1"
                                />
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="标准号" prop="version">
                                <el-input placeholder="" v-model="ruleForm.version" style="width: 150px" :disabled="1"  />
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="发布日期" prop="projectApprovalDate">
                                <el-date-picker v-model="ruleForm.projectApprovalDate" type="date" placeholder="发布日期"
                                    format="YYYY-MM-DD" value-format="YYYY-MM-DD"
                                    style="width: 150px; margin-right: 15px" :disabled="1" ></el-date-picker>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="8">
                            <el-form-item label="实施日期" prop="effectDate">
                                <el-date-picker v-model="ruleForm.effectDate" type="date" placeholder="实施日期"
                                    format="YYYY-MM-DD" value-format="YYYY-MM-DD"
                                    style="width: 150px; margin-right: 15px" :disabled="1" ></el-date-picker>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="所属行业" prop="major">
                                <el-input placeholder="" v-model="ruleForm.major" style="width: 150px" :disabled="1"  />
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="单位排名" prop="renameRank">
                                <!-- <el-input placeholder="" v-model="ruleForm.renameRank" style="width: 150px" /> -->
                                    <SelectOption :selectValue="ruleForm.renameRank" :options="options.jtpmList"
                                    @change-value="changeValue7" :disabled="1" > </SelectOption>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="奖励标准" prop="incentivestandard">
                                <SelectOption :selectValue="ruleForm.incentivestandard" :options="options.jlbzList"
                                @change-value="changeValue3" :disabled="1" > </SelectOption>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>

<script lang="ts">
import UserListModal from '@/views/project/components/UserListModal/index.vue'
import PopupTreeInput from '@/views/science/components/PopupTreeInput/index.vue'
import SelectOption from '@/views/science/components/selectOption/index.vue'
import Table from '@/views/science/components/table/table.vue'
import { computed, reactive, ref, watch } from 'vue'
import { useStore } from 'vuex'

export default {
    components: {
        SelectOption,
        Table,
        PopupTreeInput,
        UserListModal
    },
    emits: {
        usersChange: null,
        paramsChange: null,
        valueFlag2:null,
    },
    props: {
        fbData: {
            type: Object,
            required: true,
        },
        addFlag: {
            type: Number,
            required: true,
        }
    },
    setup(props, { emit }) {
        const store = useStore()
        const labelPosition = ref('right')
        const deptForm = {
            parentId: 0,
            parentName: '',
        }
        const data = reactive({
            activeName: ref('first'),
            dialogVisible: false,
            lobarDisabled: false,
            popupTreeProps: {
                label: 'name',
                children: 'children',
            },
            props: {
                multiple: true,
                expandTrigger: 'hover',
                value: 'id',
                label: 'name',
                children: 'children',
                emitPath: false
            },
            mainValue: [],
            mainValue1: [],
            chooseMatterList: [],
        })

        // 弹窗中三个下拉选择
        let options = reactive({
            orgAllList: computed(() => store.state.technologyStrength.orgAllList),
            userAllList: computed(() => store.state.technologyStrength.userAllList),

            projectnameList: computed(() => store.state.technologyStrength.KJSL_DECLARATION_TYPE),
            unitnameList: computed(() => store.state.technologyStrength.KJSL_APPLYING_FOR_AWARDS1),



            roleList: computed(() => store.state.technologyStrength.roleList),
            projectSelect: computed(() => store.state.technologyStrength.projectSelect),
            // hjTypeList: computed(() => store.state.technologyStrength.KJSL_AWARD_CATEGORY),

            hjjbList: computed(() => store.state.technologyStrength.KHGL_KJSL_HJJB),
            hjTypeList: [],
            hjdjList: [],
            jlbzList: [
                {
                    id: '1',
                    itemText: '国际标准30万',
                    itemValue: 30
                },
                {
                    id: '2',
                    itemText: '国家级标准与工法/省部级标准5万',
                    itemValue: 5
                },
                {
                    id: '3',
                    itemText: '其他标准1万',
                    itemValue: 1
                },
                {
                    id: '4',
                    itemText: '省部级、其他工法1万',
                    itemValue: 1
                }
            ],
                jtpmList: [
                    {
                    id: '1',
                    itemText: '第一名',
                    itemValue: '1'
                    },
                    {
                    id: '2',
                    itemText: '第二名',
                    itemValue: '2'
                    },
                    {
                    id: '3',
                    itemText: '第三名',
                    itemValue: '3'
                    }
                ]
        })

        const technicalnorms = ref(props.fbData)

        const ruleForm = reactive({
            id:'',
            awardApplyId: '1',
            categoryDescription: '',
            name: "",
            participatingUnits: '',
            participatingUnitsIds: '',
            draftingUnit: '',
            draftingUnitIds: '',
            drafter: '',
            drafterIds: '',
            version: '',
            projectApprovalDate: '',
            effectDate: '',
            major: '',
            renameRank: '',
            renameRankId: '',
            incentivestandard:'',
            incentivestandardid: "",
        })

        const handleData = (data) => {
            const arr1 = Object.keys(data)
            const list = ruleForm
            for (const key in list) {
                if (arr1.indexOf(key) !== -1) {
                    list[key] = data[key]
                }
            }
            return list
        }

        if(props.fbData) Object.assign(ruleForm, handleData(props.fbData))

        watch(props, (newValue, oldValue) => {
            console.log(newValue.fbData)
            technicalnorms.value = newValue.fbData
            Object.assign(ruleForm, handleData(newValue.fbData))
        });

        watch(ruleForm, (newValue, oldValue) => {
            emit('paramsChange', newValue)
        });

        // watch(
        //     () => props.addFlag,
        //     (newVal, oldVal) => {
        //         Object.keys(ruleForm).forEach((key) => {
        //             ruleForm[key] = ''
        //         })
        //     }
        // )

        const changeValue = (item) => {
            ruleForm.participatingUnitsIds = item.id
            ruleForm.participatingUnits = item.name
        }

        const changeValue1 = (item) => {
            ruleForm.draftingUnitIds = item.id
            ruleForm.draftingUnit = item.name
        }

        const changeValue2 = (item) => {
            ruleForm.drafter = item.cname
            ruleForm.drafterIds = item.userId
        }
        const changeValue3 = (item) => {
            console.log('item',item);
            ruleForm.incentivestandard = item.itemText
            ruleForm.incentivestandardid = item.itemValue
        }
        const changeValue7 = (item) => {
            console.log(item);
            ruleForm.renameRank = item.itemText
            ruleForm.renameRankId = item.itemValue
        }
        // 新增
        const rules = reactive({
            categoryDescription: [
                { required: true, message: '请输入类型说明', trigger: 'change', },
            ],
            name: [
                { required: true, message: '请输入标准名称', trigger: 'blur' },
            ],
            participatingUnits: [
                { required: true, message: '请输入编制单位', trigger: 'change', },
            ],
            draftingUnit: [
                { required: true, message: '请输入起草单位', trigger: 'change', },
            ],
            drafter: [
                { required: true, message: '请输入起草人', trigger: 'change', },
            ],
            version: [
                { required: true, message: '请输入标准号', trigger: 'change', },
            ],
            projectApprovalDate: [
                { required: true, message: '请输入发布日期', trigger: 'blur' },
            ],
            effectDate: [
                { required: true, message: '请输入实施日期', trigger: 'change', },
            ],
            major: [
                { required: true, message: '请输入所属行业', trigger: 'change', },
            ],
            renameRank: [
                { required: true, message: '请输入单位排名', trigger: 'change', },
            ],
            incentivestandard: [
                { required: true, message: '请输入奖励标准', trigger: 'blur' },
            ],
        })

        const ruleFormRef = ref()
        const submitForm = async () => {
            ruleFormRef.value.validate(valid =>{
                if (valid){
                    emit('valueFlag2', true)
                }else{
                    emit('valueFlag2', false)
                }
            })
        }

        return {
            open,
            ruleForm,
            rules,
            ruleFormRef,
            labelPosition,
            deptForm,
            data,
            options,

            changeValue,
            changeValue1,
            changeValue2,
            changeValue3,
            submitForm,
            changeValue7
        }
    },
}
</script>
<style lang="scss" scoped>
.personAddBtn {
    position: absolute;
    bottom: 0;
    right: 0;
}

.demo-form-inline .el-form-item {
    width: 48%;
}

:deep(.labelHeight .el-form-item__label) {
    line-height: 20px;
}

:deep(.el-date-editor.el-input) {
    width: 100%;
}

:deep(.el-date-editor.el-input__inner) {
    width: 100%;
}

:deep(.demo-form-inline .el-select) {
    width: 100%;
    margin: 0;
}

.el-select {
    width: 100%;
    margin: 0;
}

.selectLabel {
    width: 70%;
    min-height: 40px;
    line-height: 40px;
    padding: 0 15px;
    border: 1px solid #ccc;
    border-radius: 6px;
    display: inline-block;
}

.addLabel {
    display: inline-block;
    width: 120px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    background-color: #169bd5;
    border-radius: 6px;
    color: #fff;
    margin-left: 15px;
}

.unitBox {
    width: 100%;
    margin: 30px 0;

    .title {
        padding: 15px 0;
        border-bottom: 1px solid #ccc;
    }

    .tagBox {
        line-height: 40px;
        margin-top: 15px;
        border: 1px solid #ccc;
        border-radius: 8px;
        padding: 10px 15px;
    }
}

.el-tag {
    margin-right: 10px;
}


.content-box {
    width: 250px;
    height: 33px;
    padding: 5px;
    box-sizing: border-box;
    border: 1px solid #dcdfe6;
    border-radius: 4px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.select {
    color: #eee;
}

.align-center {
    align-items: center;
}

.space-between {
    justify-content: space-between;
}

.mt20 {
    margin-top: 20px;
}

.flex {
    display: flex;
}

.handle {
    position: absolute;
    top: 17px;
    right: 20px;
    display: flex;
    align-items: center;
}

.search-box {
    display: flex;
    justify-content: end;
    align-items: center;
    margin-bottom: 10px;
}
</style>
